

const headerTemplate = document.createElement('template');
const isRoot = !!!location.href.includes("demo");
console.log(isRoot);
headerTemplate.innerHTML = `
  <link rel="stylesheet" href="./init.css">
  <style>
  .header {
    --bg-c: #fff;
    width: 100vw;
    position: relative;
    background: var(--bg-c);
    height: 70px;
    animation: head-show .4s ease;
    margin-bottom: 15px;
    text-align:center;
}

.header .menu {
    position: absolute;
    left: 50%;
    height: 100%;
    padding: 0 20px;
    transform: translateX(-50%);
    background-color: rgb(8, 8, 8);
    color: var(--font-color-w);
    font-family: '宋体', 'Microsoft YaHei';
    transition: all .3s;
}



.menu .site-desc {
    font-size: var(--f-s-ss);
    padding-top: 8px;
    cursor: pointer;
}

.menu a {
    display: inline-block;
    color: #fff;
    line-height: 70px;
    font-family: 'Microsoft YaHei';
    padding: 0 10px;
}

.user-info {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.time {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-100%);
    color: #999;
    font-size: 12px;
}
.soud {
    width:40px;
    height: 40px;
    border: solid 1px red;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 12px;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
}
.logout {
    font-size: 14px;color: #999;cursor:pointer;
}
  </style>
<div class="header">
    <a class="soud" href="${isRoot?"":"."}./index.html" title="LOGO" style="background: url(./images/header-bg.jpg) center center no-repeat;">
      LOGO
    </a>
    <div class="time">
        <x-time></x-time>
    </div>
    <div class="menu">
        <a href='${isRoot ? '' : '.'}./about.html'>关于</a>
        <a href='${isRoot ? '' : '.'}./games.html'>游戏</a>
        <a href='${isRoot ? '' : '.'}./relax.html'>放松</a>
    </div>
  <div class="user-info">
       
  </div>
</div>
`;

class Header extends HTMLElement {
    constructor() {
        super();
        this._shadowRoot = this.attachShadow({ mode: 'open' });
        this._shadowRoot.appendChild(headerTemplate.content.cloneNode(true));

        this.$user_info = this._shadowRoot.querySelector(".user-info");
        const logout_btn = document.createElement("a");
        logout_btn.classList.add("logout");
        logout_btn.innerText = "退出";

        logout_btn.addEventListener("click", () => {
            this.logout();
        }, false);
        this.checkUser();
        this.$user_info.appendChild(logout_btn);

    }
    checkUser() {
        const user = storage.get("user");
        if (!user) location.href = "./login.html";
        const span = document.createElement("span");
        span.innerHTML = "Hello !&nbsp;" + user.username + "&nbsp;&nbsp;";
        this.$user_info.appendChild(span);
    }
    logout() {
        if (!window.confirm("确定退出吗？")) return;
        storage.remove("user");
        location.reload();
    }

}

window.customElements.define("x-header", Header);
